<template>
  <div>
    <el-upload
      :action= "actionUrl"
      list-type="picture-card"
      :file-list="imageList"
      :before-upload="beforeAvatarUpload"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleAdd"
      :on-start="imageUrl"
      name="file"
      :data="tokenInfor">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog v-model="dialogVisible" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
    <el-dialog v-model="dialogVisible" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
<script>
import {mapGetters, mapActions} from 'vuex'
  export default {
    data() {
      return {
        token: '',
        tokenInfor:{token:''},
        dialogImageUrl: '',
        dialogVisible: false,
        actionUrl:''
      };
    },
    props:{
      imgSize:'',
      imageList:'',
      fileType:'',
      index:''

      
    },
    mounted(){
      // console.log(this.actionUrl)
      this.getStorage('ylManageToken').then((val)=>{
        if(val){
          this.token = val.slice(1,-1);
        }
      });
      this.actionUrl=this.apiUrl+"uploadFile/upload";
    },
    computed: {
      //映射State
      ...mapGetters([
        'apiUrl'
      ])
    },
    methods: {

      ...mapActions([
        'getStorage'
      ]),
      handleRemove(file, fileList) {
        this.$emit('handleRemove',[file, fileList,this.index]);
        // console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleAdd(response, file, fileList) {
        console.log(response)
        if( response.code==9999 ){
          file.url=response.data.realpath;
          file.path=response.data.path;
          this.$emit('handleAdd',[response, file, fileList,this.index]);
        }else{
          this.$alert('图片上传失败，请重新上传！', '表单填写提示', {
            confirmButtonText: '确定',
          })
        }
      },  
      imageUrl(response, file, fileList) {
        // console.log(fileList)
        // this.$emit('handleAdd',[response, file, fileList]);
      },
      beforeAvatarUpload(file) {
        this.tokenInfor.token=this.token;
        // const isJPG = file.type === 'image/jpeg'||'image/png';
        if(this.fileType=="movie"){
          console.log("aaaaaaaaaaa",file.type)
      
          //视屏格式判断
            const isVideo = file.type === 'video/mp4'||file.type === 'video/rmvb'||file.type === 'video/avi';
          const isLt5M = file.size / 1024 / 1024 < 10;

          if (!isVideo) {
            this.$message.error('上传视频只能是 MP4/rmvb/avi 格式!');
          }
          if (!isLt5M) {
            this.$message.error('上传图片大小不能超过 10MB!');
          }
          return isVideo && isLt5M;
        }else{
          const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传图片只能是 JPG/PNG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        }
      }
    }
  }
</script>